<template>
  <div>
    <crumbs
      :superiorMenu="['管理设置']"
      currentMenu="审批设置"
      style="margin-bottom: 12px"
    ></crumbs>
    <a-card v-if="!show" :bordered="false" size="small">
      <a-tabs v-model="tab" @change="callback">
        <a-tab-pane key="申请审批流程设置" tab="申请审批流程设置"></a-tab-pane>
        <a-tab-pane key="业务审批管理" tab="业务审批管理"></a-tab-pane>
      </a-tabs>
      <div
        v-if="tab === '申请审批流程设置' && detailList.length > 0"
        style="height: calc(100vh - 225px); overflow-y: scroll"
      >
        <div class="wrap" v-for="(item, index) in detailList[0].entityProcList" :key="index">
          <span>{{ item.operateName }}</span>
          <a @click="toproc(item.procCode)">设置审批流</a>
        </div>
      </div>
      <div v-if="tab === '业务审批管理' && detailList.length > 0">
        <div class="explain">
          <van-icon style="margin-right: 5px" name="question-o" size="16" /><span
            >以下表单如果启用审批新建后审批通过后在对应模块才能查看到，如果不启用审批新建保存后自动生效；</span
          >
        </div>
        <div style="height: calc(100vh - 245px); overflow-y: scroll">
          <div
            v-for="(item, index) in detailList"
            :key="index"
            style="border-bottom: 1px solid #f5f5f5; padding: 10px 0"
            v-show="item.groupName=='销售管理' || item.groupName=='采购管理'"
          >
            <h4 class="title">{{ item.groupName }}</h4>
            <div class="wrap" v-for="(items, indexs) in item.entityProcList" :key="indexs">
              <div>
                <span>{{ items.operateName }}</span>
              </div>
              <div>
                <a
                  v-if="items.enable === 'yes' && items.allowedChangeEnable === 'true'"
                  style="margin-right: 10px"
                  @click="toproc(items.procCode)"
                  >设置审批流</a
                >
                <span v-else style="color: #999; margin-right: 10px">设置审批流</span>
                <a-switch
                  :checked="items.enable === 'yes' ? true : false"
                  :disabled="items.allowedChangeEnable === 'true' ? false : true"
                  @change="onChange(items)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <div v-if="show">
      <approval :id="id" @approval="approval" />
    </div>
  </div>
</template>
<script>
import { getAction, putAction } from '@/api/manage'
import approval from '@/views/managementSettings/approvalSetting/approval'
import crumbs from '@/components/crumbs.vue'
export default {
  data() {
    return {
      show: false,
      tab: '申请审批流程设置',
      detailList: [],
      id: '',
      url: {
        list: '/sys/sysEntityProc/queryByCategoryName',
        edit: '/sys/sysEntityProc/edit',
      },
    }
  },
  created() {
    this.getList()
  },
  components: {
    approval,
    crumbs,
  },
  methods: {
    callback(e) {
      console.log(e, this.tab)
      this.tab = e
      this.getList()
    },
    getList() {
      getAction(this.url.list, { categoryName: this.tab }).then((res) => {
        this.detailList = res.result
      })
    },
    toproc(e) {
      console.log(e, 'eee')
      this.id = e
      this.show = true
    },
    onChange(e) {
      console.log(e, 'change')
      putAction(this.url.edit, { id: e.id, enable: e.enable == 'yes' ? 'no' : 'yes' }).then((res) => {
        console.log(res, 'res')
        if (res.code == 200) {
          this.$antdMessage.success(res.message)
          this.getList()
        } else {
          this.$antdMessage.error(res.message)
        }
      })
    },
    approval() {
      this.show = false
    },
  },
}
</script>
<style lang="less" scoped>
.wrap {
  display: flex;
  justify-content: space-between;
  margin: 15px 10vw;
  span {
    color: #000;
  }
}
.title {
  color: #1890ff;
  margin-left: 10vw;
}
.explain {
  color: #ed6c2d;
  text-align: center;
}
</style>


